<script>
// 数据详情页
import { defineComponent } from 'vue'
export default defineComponent({
	name: 'WeworkQrList'
})
</script>
<script setup>
import { ref, defineExpose } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { nameList, nameObj, diaTab } from '@/data'
import { postusergroup,postusergroupdata,postusercustomer,postusercustomegroup,postusercustomestaff,postusercustomedata,postuserstafflist,postusercustomes  } from '@/api'
const nameListA = ref(nameList)
const searchVal = ref('')
const search = () => {
	console.log('搜索客户')
}
const props = defineProps({
	type: {
		type: String,
		default: 'group'
	}
})
const tabType = ref('three')
const title = ref('')
const tab = ref([])
const nameObjN = ref({})
const activeType = ref(0)
if (props.type == 'group') {
	title.value = '群聊'
} else if (props.type == 'customer') {
	title.value = '客户'
	tab.value = [
		{
			name: '员工'
		},
		{
			name: '群聊'
		}
	]
	nameObjN.value = nameObj
} else if (props.type == 'staff') {
	title.value = '员工'
	tab.value = [
		{
			name: '客户'
		},
		{
			name: '同事'
		},
		{
			name: '群聊'
		}
	]
	nameObjN.value = nameObj
}
const postusergroupapi = ()=>{
	if(props.type == 'group'){
		postusergroup({name:searchVal.value}).then(res=>{
		nameListA.value=res.data.group_list
		total.value=res.data.group_list.length
		chatrecord.value=res.data.chat_data
		// for(var i = 0;i<chatrecord.value.length;i++){
		// 	chatrecord.value[i].isMe = 1
		// }
		if(props.type == 'group'){
			for(var i = 0;i<chatrecord.value.length;i++){
				chatrecord.value[i].isMe = 1
			}
		}
	})
	}else if(props.type == 'customer'){
		postusercustomer().then(res=>{
			nameListA.value=res.data.customer_list
			total.value=res.data.customer_list.length
			nameListB.value=res.data.staff_list
			chatrecord.value=res.data.chat_data
		})
	}else if(props.type == 'staff'){
		postuserstafflist().then(res=>{
			nameListA.value=res.data.staff_list
			total.value=res.data.staff_list.length
			nameListB.value=res.data.custome_list
			chatrecord.value=res.data.chat_data
		})
	}
	
}
postusergroupapi()
const total = ref(0)
const chatrecord=ref([])
const activeIndex = ref(0)
const activeIndexs=ref(0)
const selfTime = ref([])
const jump = (url) => {
	window.open(url)
}
const nameListB = ref([])
const dtime = ref()
const ktime=ref()
const searchVals = ref()
const groupchat=(val,type)=>{
	console.log(val,type)
	if(props.type == 'staff'){
		if(activeType.value != 2){
			postusercustomedata({external_userid:nameListB.value[activeIndexs.value].external_userid,userid:nameListA.value[activeIndex.value].userid,content:searchVals.value,type:tabType.value,dtime:dtime.value,ktime:ktime.value}).then(res=>{
				chatrecord.value=res.data
					// if(props.type == 'group'){
						for(var i = 0;i<chatrecord.value.length;i++){
							chatrecord.value[i].isMe = 1
						}
					// }
			})
		}else{
			postusergroupdata({roomid:nameListB.value[activeIndexs.value].chat_id,content:searchVals.value,type:tabType.value,dtime:dtime.value,ktime:ktime.value}).then(res=>{
				chatrecord.value=res.data
					// if(props.type == 'group'){
						for(var i = 0;i<chatrecord.value.length;i++){
							chatrecord.value[i].isMe = 1
						}
					// }
			})
		}
		
	}else{
		if(type == 1){
		if(type != 'group'){
			postusergroupdata({roomid:nameListA.value[activeIndex.value].chat_id,content:searchVals.value,type:tabType.value,dtime:dtime.value,ktime:ktime.value}).then(res=>{
				chatrecord.value=res.data
				if(props.type == 'group'){
					for(var i = 0;i<chatrecord.value.length;i++){
						chatrecord.value[i].isMe = 1
					}
				}
				
			})
		}else{

		}
		
	}else{
		
		if(activeType.value != 0){
			postusergroupdata({roomid:val.chat_id,content:searchVals.value,type:tabType.value,dtime:dtime.value,ktime:ktime.value}).then(res=>{
				chatrecord.value=res.data
				// if(props.type == 'group'){
					for(var i = 0;i<chatrecord.value.length;i++){
						chatrecord.value[i].isMe = 1
					}
				// }
				
			})
		}else{
			console.log(activeType.value)
			postusercustomedata({external_userid:nameListA.value[activeIndex.value].external_userid,userid:nameListB.value[activeIndexs.value].userid,content:searchVals.value,type:tabType.value,dtime:dtime.value,ktime:ktime.value}).then(res=>{
				chatrecord.value=res.data.chat_data
				for(var i = 0;i<chatrecord.value.length;i++){
						chatrecord.value[i].isMe = 1
					}
			})
		}
		
	}
	}
	
	
}
const groupchats=(val,type)=>{
	console.log(val)
	postusercustomestaff({external_userid:val.external_userid}).then(res=>{
		nameListB.value=res.data.staff_list
			chatrecord.value=res.data.chat_data
			// if(props.type == 'group'){
				for(var i = 0;i<chatrecord.value.length;i++){
					chatrecord.value[i].isMe = 1
				}
			// }
	})
}
const groupchate=(val,type)=>{
	postusercustomes({userid:val.userid,type:1}).then(res=>{
		nameListB.value=res.data.custome_list
		chatrecord.value=res.data.chat_data
			// if(props.type == 'group'){
				for(var i = 0;i<chatrecord.value.length;i++){
					chatrecord.value[i].isMe = 1
				}
			// }
	})
}
const tablistdata=(val)=>{
	console.log(val)
	if(props.type == 'staff'){
		postusercustomes({userid:nameListA.value[activeIndex.value].userid,type:val + 1}).then(res=>{
			nameListB.value=res.data.custome_list
			chatrecord.value=res.data.chat_data
				// if(props.type == 'group'){
					for(var i = 0;i<chatrecord.value.length;i++){
						chatrecord.value[i].isMe = 1
					}
				// }
		})
	}else{
		if(val == 1){
		postusercustomegroup({external_userid:nameListA.value[activeIndex.value].external_userid}).then(res=>{
			nameListB.value=res.data.group_list
			chatrecord.value=res.data.chat_data
			// if(props.type == 'group'){
				for(var i = 0;i<chatrecord.value.length;i++){
					chatrecord.value[i].isMe = 1
				}
			// }
		})
	}else{
		postusercustomestaff({external_userid:nameListA.value[activeIndex.value].external_userid}).then(res=>{
			nameListB.value=res.data.staff_list
			chatrecord.value=res.data.chat_data
			// if(props.type == 'group'){
				for(var i = 0;i<chatrecord.value.length;i++){
					chatrecord.value[i].isMe = 1
				}
			// }
		})
	}
	}
	
	
}
</script>

<template>
	<div class="app-flex-left chat-page">
		<div class="chat-left a-scorll">
			<div class="chat-header">
				<div>
					{{ title }}
					<span class="chat-num">({{ total }})</span>
				</div>
				<el-input
					v-model="searchVal"
					style="margin:14px 0 0;"
					class="a-mt12"
					size="large"
					@input="postusergroupapi"
					placeholder="请输入名称"
					clearable
					suffix-icon="Search"
				/>
			</div>
			<div class="">
				<div
					class="chat-left-cell"
					@click="activeIndex = index;groupchat(item,1)"
					:class="activeIndex == index ? 'chat-left-cell-active' : ''"
					v-for="(item, index) in nameListA"
					:key="index"
					v-if="type == 'group'"
				>
					<el-avatar shape="square" class="a-mr8" :size="36" :src="item.avatar" v-if="type != 'group'" />
					<img style="border-radius: 5px;margin-right: 5px;" src="../../../assets/img/img/avatar-room-default.67bead38e751.svg" v-if="type == 'group'" />
					<div class="">
						<div class="chat-name">{{ item.name }}</div>
						<!-- <div class="chat-an-name">{{ item.rbacName }}</div> -->
					</div>
				</div>
				<div
					class="chat-left-cell"
					@click="activeIndex = index;groupchats(item,1)"
					:class="activeIndex == index ? 'chat-left-cell-active' : ''"
					v-for="(item, index) in nameListA"
					:key="index"
					v-if="type == 'customer'"
				>
					<el-avatar shape="square" class="a-mr8" :size="36" :src="item.avatar" v-if="type != 'group'" />
					<img style="border-radius: 5px;margin-right: 5px;" src="../../../assets/img/img/avatar-room-default.67bead38e751.svg" v-if="type == 'group'" />
					<div class="">
						<div class="chat-name">{{ item.name }}</div>
						<!-- <div class="chat-an-name">{{ item.rbacName }}</div> -->
					</div>
				</div>
				<div
					class="chat-left-cell"
					@click="activeIndex = index;groupchate(item,1)"
					:class="activeIndex == index ? 'chat-left-cell-active' : ''"
					v-for="(item, index) in nameListA"
					:key="index"
					v-if="type == 'staff'"
				>
					<el-avatar shape="square" class="a-mr8" :size="36" :src="item.avatar" v-if="type != 'group'" />
					<img style="border-radius: 5px;margin-right: 5px;" src="../../../assets/img/img/avatar-room-default.67bead38e751.svg" v-if="type == 'group'" />
					<div class="">
						<div class="chat-name">{{ item.name }}</div>
						<!-- <div class="chat-an-name">{{ item.rbacName }}</div> -->
					</div>
				</div>
			</div>
		</div>
		<div class="chat-center a-scorll" v-if="type != 'group'">
			<div class="chat-center-header chat-16">
				<div class="app-flex-left">
					<el-avatar shape="square" class="a-mr8" :size="36" :src="nameListA[activeIndex].avatar" />
					<div class="chat-name">{{ nameListA[activeIndex].name }}</div>
				</div>
			</div>
			<div class="chat-tab">
				<span
					@click="activeType = index;tablistdata(activeType)"
					:class="[type == 'staff' ? 'chat-tab-item' : 'chat-tab-item2']"
					v-for="(item, index) in tab"
					:key="index"
				>
					<span :class="activeType == index ? 'chat-tab-active' : ''">{{ item.name }}</span>
				</span>
			</div>
			<el-input
				v-model="searchVal"
				style="padding: 0 16px;margin:14px 0;"
				class="a-mt12"
				size="large"
				@input="search"
				placeholder="请输入名称"
				clearable
				suffix-icon="Search"
			/>
			<div class="a-mt16">
				<div
					class="chat-left-cell"
					@click="activeIndexs = index;groupchat(item,2)"
					:class="activeIndexs == index ? 'chat-left-cell-active' : ''"
					v-for="(item, index) in nameListB"
					:key="index"
				>
					<el-avatar shape="square" class="a-mr8" :size="36" :src="item.avatar" />
					<div class="">
						<div class="chat-name app-flex-2" style="width: 160px">
							<span>{{ item.name }}</span>
							<!-- <span class="chat-time">7月15日</span> -->
						</div>
						<!-- <div class="chat-an-name">{{ item.rbacName }}</div> -->
					</div>
				</div>
			</div>
		</div>
		<div class="chat-right a-scorll" :class="type != 'group' ? 'chat3-right' : ''">
			<div class="chat-top app-flex-2">
				<div class="chat-top-left" >
					<div v-if="type != 'group'">
						<!-- <span class="font-1">{{nameListB[activeIndexs].name }}</span> -->
						<!-- <span>@微信</span> -->
					</div>
					<!-- <div class="chat-an-name" v-if="type != 'group'">备注名：团团</div> -->
				</div>
				<div class="chat-top-right">
					<el-input
						v-model="searchVals"
						style="width: 200px"
						size="large"
						@input="groupchat"
						placeholder="搜索消息"
						clearable
						suffix-icon="Search"
					/>
					<el-radio-group class="a-ml16" v-model="tabType" size="large" @click="groupchat">
						<el-radio-button :label="item.type" v-for="(item, index) in diaTab" :key="index">{{
							item.name
						}}</el-radio-button>
					</el-radio-group>
					<!-- <el-date-picker
						class="app-date-picker a-ml16"
						v-model="selfTime"
						type="daterange"
						range-separator="~"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						size="large"
					/> -->
					<el-date-picker
						v-model="ktime"
						type="datetime"
						placeholder="开始时间"
						format="YYYY/MM/DD hh:mm:ss"
						value-format="YYYY-MM-DD hh:mm:ss"
						size="large"
						style="margin-left: 5px;"
					/>
					-
					<el-date-picker
						v-model="dtime"
						type="datetime"
						placeholder="结束时间"
						format="YYYY/MM/DD hh:mm:ss"
						value-format="YYYY-MM-DD hh:mm:ss"
						size="large"
					/>
				</div>
			</div>
			<div class="chat-tip">对方不同意存档会话内容，你将无法继续提供</div>
			<!-- <div class="chat-empty">
	暂无消息
</div> -->
			<div class="c-c-box">
				<div class="a-mb33" v-for="(item, index) in chatrecord" :key="index">
					<div v-if="item.msgtype == 'text'" :class="item.isMe == 1 ? 'content-left' : 'content-right'">
						<el-avatar v-if="item.isMe == 1" shape="square" class="" :size="36" :src="item.user.avatar" />
						<div v-if="item.isMe == 1" class="c-arr-1"></div>
						<div class="content-box-bull" :class="item.isMe == 1 ? 'c-light-blue' : 'c-deep-blue'">{{ item.content.content }}</div>
						<div v-if="item.isMe != 1" class="c-arr-2"></div>
						<el-avatar v-if="item.isMe != 1" shape="square" class="" :size="36" :src="item.user.avatar" />
					</div>
					<div
						v-else-if="item.msgtype == 'emoji' || item.msgtype == 'picText'"
						:class="item.isMe == 1 ? 'content-left' : 'content-right'"
					>
						<el-avatar v-if="item.isMe == 1" shape="square" class="" :size="36" :src="item.user.avatar" />
						<div v-if="item.isMe == 1" class="c-arr-1"></div>
						<div
							class="content-box-bull"
							:class="item.isMe == 1 ? 'c-light-blue' : 'c-deep-blue'"
							v-html="item.text"
						></div>
						<div v-if="item.isMe != 1" class="c-arr-2"></div>
						<el-avatar v-if="item.isMe != 1" shape="square" class="" :size="36" :src="item.user.avatar" />
					</div>
					<div v-if="item.msgtype == 'voice'" :class="item.isMe == 1 ? 'content-left' : 'content-right'">
						<el-avatar v-if="item.isMe == 1" shape="square" class="" :size="36" :src="item.user.avatar" />
						<div v-if="item.isMe == 1" class="c-arr-1"></div>
						<div>
							<div :class="item.isMe == 1 ? 'app-flex-left' : 'app-flex-right'">
								<!-- <span v-if="item.isMe != 1" class="c-sec">{{ item.content.url }}''</span> -->
								<audio
									ref="audio" 
									:src="item.content.url" 
									autoplay="autoplay" 
									preload="none" 
									controls="controls" 
									loop="loop" 
									v-if="item.isMe != 1"
									>Your browser does not support the audio element.</audio>
								<el-popover width="" popper-style="padding: 0px;min-width:0px" placement="right" trigger="click">
									<div @click="item.showText = true" class="app-container pop-max-width app-pointer">转文字</div>
									<template #reference>
										<div class="content-box-bull" :class="item.isMe == 1 ? 'c-light-blue' : 'c-deep-blue'">
											<div :class="item.isMe == 1 ? 'c-arr-2' : 'c-arr-1'"></div>
										</div>
									</template>
								</el-popover>
								<!-- <span v-if="item.isMe == 1" class="c-sec">{{ item.content.url }}''</span> -->
								<audio
									ref="audio" 
									:src="item.content.url" 
									autoplay="autoplay" 
									preload="none" 
									controls="controls" 
									loop="loop" 
									v-if="item.isMe == 1"
									>Your browser does not support the audio element.</audio>
							</div>
							<div
								class="content-box-bull co-mt6"
								v-if="item.showText"
								:class="item.isMe == 1 ? 'c-light-blue' : 'c-deep-blue'"
							>
								{{ item.text }}
							</div>
						</div>
						<div v-if="item.isMe != 1" class="c-arr-2"></div>
						<el-avatar v-if="item.isMe != 1" shape="square" class="" :size="36" :src="item.user.avatar" />
					</div>
					<div v-if="item.msgtype == 'image'" :class="item.isMe == 1 ? 'content-left' : 'content-right'">
						<el-avatar v-if="item.isMe == 1" shape="square" class="" :size="36" :src="item.user.avatar" />
						<div v-if="item.isMe == 1" class="c-arr-1"></div>
						<el-image :src="item.content.url" class="co-img" />
						<div v-if="item.isMe != 1" class="c-arr-2"></div>
						<el-avatar v-if="item.isMe != 1" shape="square" class="" :size="36" :src="item.user.avatar" />
					</div>
					<div v-else-if="item.msgtype == 'video'" :class="item.isMe == 1 ? 'content-left' : 'content-right'">
						<el-avatar v-if="item.isMe == 1" shape="square" class="" :size="36" :src="item.user.avatar" />
						<div v-if="item.isMe == 1" class="c-arr-1"></div>
						<div class="c-vid" @click="jump(item.content.url)">
							<!-- <el-image :src="item.cover" class="co-vid" />
							<div class="c-arr-1 c-vid-center"></div>
							<div class="app-flex-2 c-vid-bottom">
								<div class="c-arr-1"></div>
								<div class="">{{ item.content.url }}</div>
							</div> -->
							<video id="media" class="media" height="200" width="400" controls :src="item.content.url"></video>
							<!-- <video
								ref="myVideo"
								:poster="poster"
								:src="item.content.url"
								:controls="controls"
								oncontextmenu="return false"
								@timeupdate="timeupdate"
								controlslist="nodownload"
								class="video-box"
							></video> -->
						</div>
						<div v-if="item.isMe != 1" class="c-arr-2"></div>
						<el-avatar v-if="item.isMe != 1" shape="square" class="" :size="36" :src="item.user.avatar" />
					</div>
					<div v-else-if="item.msgtype == 'card'" :class="item.isMe == 1 ? 'content-left' : 'content-right'">
						<el-avatar v-if="item.isMe == 1" shape="square" class="" :size="36" :src="item.user.avatar" />
						<div v-if="item.isMe == 1" class="c-arr-1"></div>
						<div class="c-card">
							<div class="app-flex-2 co-p16">
								<div class="app-flex-2-c" style="height: 60px">
									<div class="c-com">{{ item.content.corpname }}</div>
									<div class="c-name">{{ item.content.corpname }}</div>
								</div>
								<el-avatar shape="square" :src="item.cardAvatar" :size="60" />
							</div>
							<div class="co-ptip">个人名片</div>

							<div class="app-flex-2 c-vid-bottom">
								<div class="c-arr-1"></div>
								<div class="">{{ item.second }}</div>
							</div>
						</div>
						<div v-if="item.isMe != 1" class="c-arr-2"></div>
						<el-avatar v-if="item.isMe != 1" shape="square" class="" :size="36" :src="item.user.avatar" />
					</div>

					<div v-else-if="item.msgtype == 'location'" :class="item.isMe == 1 ? 'content-left' : 'content-right'">
						<el-avatar v-if="item.isMe == 1" shape="square" class="" :size="36" :src="item.avatar" />
						<div v-if="item.isMe == 1" class="c-arr-1"></div>
						<div class="c-vid" @click="jump(item.url)">
							<el-image :src="item.cover" class="co-loc" />
							<div class="co-loc-bot">
								<div class="co-loc-text">{{ item.address }}</div>
								<div class="co-loc-text1">{{ item.detail }}</div>
							</div>
						</div>
						<div v-if="item.isMe != 1" class="c-arr-2"></div>
						<el-avatar v-if="item.isMe != 1" shape="square" class="" :size="36" :src="item.avatar" />
					</div>
					<div v-else-if="item.msgtype == 'file'" :class="item.isMe == 1 ? 'content-left' : 'content-right'">
						<el-avatar v-if="item.isMe == 1" shape="square" class="" :size="36" :src="item.user.avatar" />
						<div v-if="item.isMe == 1" class="c-arr-1"></div>
						<div class="c-card" @click="jump(item.url)">
							<div class="app-flex-2 co-p16" style="border-bottom: none">
								<div class="app-flex-2-c" style="height: 60px">
									<div class="c-fileName">{{ item.content.filename }}</div>
									<div class="c-size">{{ item.content.filesize }}</div>
								</div>
								<el-avatar shape="square" :src="item.content.url" :size="60" />
							</div>
						</div>
						<div v-if="item.isMe != 1" class="c-arr-2"></div>
						<el-avatar v-if="item.isMe != 1" shape="square" class="" :size="36" :src="item.user.avatar" />
					</div>
					<div v-else-if="item.msgtype == 'link'" :class="item.isMe == 1 ? 'content-left' : 'content-right'">
						<el-avatar v-if="item.isMe == 1" shape="square" class="" :size="36" :src="item.avatar" />
						<div v-if="item.isMe == 1" class="c-arr-1"></div>
						<div class="c-card" @click="jump(item.url)">
							<div class="co-p16">
								<div class="c-fileName">{{ item.title }}</div>
								<div class="app-flex-right">
									<el-avatar shape="square" :src="item.cardAvatar" :size="60" />
								</div>
							</div>
							<div class="co-ptip app-flex-left">
								<div class="c-arr-2"></div>
								{{ item.source }}
							</div>
						</div>
						<div v-if="item.isMe != 1" class="c-arr-2"></div>
						<el-avatar v-if="item.isMe != 1" shape="square" class="" :size="36" :src="item.avatar" />
					</div>

					<div v-else-if="item.msgtype == 'mini'" :class="item.isMe == 1 ? 'content-left' : 'content-right'">
						<el-avatar v-if="item.isMe == 1" shape="square" class="" :size="36" :src="item.avatar" />
						<div v-if="item.isMe == 1" class="c-arr-1"></div>
						<div class="c-card" @click="jump(item.url)">
							<div class="co-p16 app-flex-left" style="border: none">
								<el-avatar shape="circle" :src="item.cardAvatar" :size="30" />
								<span class="app-gap-words-left-s app-words-tip-weak">{{ item.cardName }}</span>
							</div>
							<div>
								<div class="c-fileName" style="margin-left: 16px">{{ item.title }}</div>
								<div class="co-p16">
									<el-image shape="square" :src="item.cover" :size="160" />
								</div>
							</div>
							<div class="co-ptip app-flex-left">
								<div class="c-arr-2"></div>
								{{ item.source }}
							</div>
						</div>
						<div v-if="item.isMe != 1" class="c-arr-2"></div>
						<el-avatar v-if="item.isMe != 1" shape="square" class="" :size="36" :src="item.avatar" />
					</div>

					<div v-else-if="item.msgtype == 'chat'" :class="item.isMe == 1 ? 'content-left' : 'content-right'">
						<el-avatar v-if="item.isMe == 1" shape="square" class="" :size="36" :src="item.avatar" />
						<div v-if="item.isMe == 1" class="c-arr-1"></div>
						<div class="c-card">
							<div class="app-flex-2 co-p16" style="border-bottom: none">
								<div class="">
									<div class="c-fileName" style="margin-bottom: 6px">{{ item.title }}的聊天记录</div>
									<div class="c-size" v-for="(record, index) in item.records" :key="index">{{ record }}</div>
								</div>
							</div>
						</div>
						<div v-if="item.isMe != 1" class="c-arr-2"></div>
						<el-avatar v-if="item.isMe != 1" shape="square" class="" :size="36" :src="item.avatar" />
					</div>

					<div v-else-if="item.msgtype == 'time'" class="content-time">{{ item.text }}</div>
					<div v-else-if="item.msgtype == 'revoke'" class="app-flex-center">
						<div class="content-revoke c-rev-l">
							<span>你撤回了一条消息</span>
							<span class="c-rev-r">重新编辑</span>
						</div>
					</div>
				</div>
			</div>
			<div></div>
		</div>
	</div>
</template>
<style lang="scss">
@import url('@/style/app-component.scss');
@import '@/style/mixin.scss';
.el-input__wrapper {
	background: rgba(0, 0, 0, 0.04);
}
.a-scorll {
	overflow-y: auto;
	@include scrollBar;
}
.chat-page {
	.font-1 {
		font-size: 14px;
		font-family: PingFang-SC-Medium, PingFang-SC;
		font-weight: 500;
		color: #000000;
	}
	.font-2 {
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #00c337;
	}
}
</style>
